<template>
    <z-paging>
        <view class="header_box">
            <view class="biaoti_box">
                <view class="left_icon_box" @click="back">
                    <image src="https://www.dingxians.cn/upload/20250324/67e13c80ecef6.png" mode="scaleToFill" />
                </view>
                <view class="center_biaoti_box">
                    换箱
                </view>
                <view class="left_icon_box">
                    <!-- 占位 -->
                </view>
            </view>
        </view>
        <!-- tab区域 -->
        <scroll-view scroll-x="true" class="tabs" :scroll-left="scrollLeft" scroll-into-view="item100">
            <view :id="'item' + index" class="dg_box" :class="tabIndex == index ? 'dg_box1' : ''"
                v-for="(item, index) in tabsList" :key="index" @click="tabsBtn(item, index)"
                :style="{ backgroundImage: `url(https://www.dingxians.cn/upload/${(tabIndex == index ? '20250401/67eb9ab7eedf9' : '20250401/67eb9ab7f05de')}.png)` }">
                {{ item }}
            </view>
        </scroll-view>
        <view v-for="(item, index) in bonusList" :key="index" class="dange_box" @click="jionBox(item)"
                    :class="item.is_finish == 1 ? 'dange_box1' : ''"
                    style="background-image: url('https://www.dingxians.cn/upload/20250401/67eb9e19537a2.png');">
                    <!-- <view class="dingweimingzi_box bgs">
                    <view class="libianzi_box">典藏赏</view>
                    </view> -->
                    <view class="xiangzi_left_box">
                        <view class="left_image_box">
                            <view class="l_t_img_box">
                                <image src="https://www.dingxians.cn/upload/20250401/67eb9e6274903.png" mode="scaleToFill" />
                            </view>
                            <view class="bot_text_box">第{{ item.boxs }}箱</view>
                        </view>
                        <!-- <view class="shengjixiang_box">剩{{ item.residue_num }}张</view> -->
                    </view>
                    <view class="zhongjian_box">
                        <view class="l_b">{{ item.nums }}</view>
                        <!-- <view class="r_b">{{ item.level_name }}</view> -->
                    </view>
                    <view class="zhongjian_box">
                        <view class="l_b" style="color: #fff;">剩{{ item.residue_num }}张</view>
                    </view>
                    <view class="yishouqina_box" v-if="item.is_finish == 1"
                        style="background-image: url('https://kimi.dingxians.cn/upload/static/lts/11.png');"></view>
                </view>
    </z-paging>
</template>
<script>
import api from '../../api/index.js'
export default {
    components: {
    },
    data() {
        return {
            tabsList: [],//选项卡列表
            tabIndex: 0,//选项卡id
            mhId: '',//盒子id
            scrollLeft: 0,//默认位置
            selName: '1-10', //默认1-10的列表
            bonusList: [],//箱列表
        }
    },

    onLoad(e) {
        this.mhId = e.mhId
        this.tabIndex = e.tabIndex
    },
    onShow() {
        console.log(this.tabIndex)
        this.gettabsList()//获取tabs选项卡列表
        setTimeout(() => {
            this.scrollToView(this.tabIndex)
        }, 1000);
    },
    methods: {
        back(){
            uni.navigateBack()
        },
        // 监听滚动高度
        pageScroll(event) {
            uni.$emit("onPageScroll", event.detail.scrollTop)
        },
        //自动滚动到当前箱数指定的区间view
        scrollToView(index) {
            this.$nextTick(() => {
                uni.createSelectorQuery().in(this).select(`#item${index}`).boundingClientRect(data => {
                    console.log('进来了', data)
                    this.scrollLeft = data.left;
                }).exec();
            });
        },
        // 选项卡
        tabsBtn(item, index) {
            this.tabIndex = index
            this.selName = item
            this.getList()
        },
        //获取tabs选项卡列表
        gettabsList() {
            let data = {
                challenge_box_id: this.mhId
            }
            api.index.challengeBoxPrizesGetBoxs(data)
                .then((res) => {
                    if (res.code == 200) {
                        this.tabsList = res.data.data
                        this.selName = res.data.data[this.tabIndex]
                        this.getList()
                    }
                })

        },
        // 获取当前箱数列表
        getList() {
            let data = {
                challenge_box_id: this.mhId,
                boxs: this.selName,
                tag: ''
            }
            this.bonusList = []
            api.index.challengeBoxPrizesExchangeBoxs(data)
                .then((res) => {
                    if (res.code == 200) {
                        res.data.data.forEach(item => {
                        item.nums = item.prizes[item.prizes.length - 1].nums
                        item.level_name = item.prizes[item.prizes.length - 1].level_name
                    });
                    this.bonusList = res.data.data
                    }
                })
        },
        // 换箱返回
        jionBox(item) {
            uni.setStorageSync('boxs', item.boxs)
            uni.navigateBack()
        }
    }
}
</script>
<style lang="scss" scoped>
::v-deep.zp-scroll-view-absolute {
    background-image: none !important;
    background-color: #000 !important;
}

.header_box {
    width: 750rpx;
    height: 180rpx;
    box-sizing: border-box;
    padding-top: 92rpx;

    .biaoti_box {
        width: 100%;
        height: 88rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 20rpx;

        .left_icon_box {
            width: 80rpx;
            height: 80rpx;

            image {
                width: 100%;
                height: 100%;
            }
        }

        .center_biaoti_box {
            width: 380rpx;
            height: 88rpx;
            line-height: 88rpx;
            text-align: center;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            font-size: 40rpx;
            color: #fff;
            font-weight: 900;
        }
    }
}


.tabs {
    width: 100%;
    height: 100rpx;
    box-sizing: border-box;
    margin-bottom: 20rpx;
    white-space: nowrap;

    .dg_box {
        display: inline-block;
        width: 172rpx;
        height: 98rpx;
        background-size: 100% 100%;
        text-align: center;
        line-height: 95rpx;
        font-family: Source Han Serif CN;
        font-weight: 800;
        font-size: 30rpx;
        color: #97BCC1;

        &.dg_box1 {
            color: rgba(255, 255, 255, 1);
        }
    }
}


.dange_box {
    width: 690rpx;
    height: 183rpx;
    background-size: 100% 100%;
    margin: auto;
    position: relative;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    margin-bottom: 20rpx;

    &.dange_box1 {
        opacity: .5;
    }

    .yishouqina_box {
        position: absolute;
        width: 118rpx;
        height: 92rpx;
        background-size: 100% 100%;
        bottom: 0;
        right: 0;
    }

    .dingweimingzi_box {
        width: 200rpx;
        height: 50rpx;
        position: absolute;
        top: 0;
        left: 0;

        .libianzi_box {
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            position: absolute;
            padding-left: 20rpx;
            line-height: 50rpx;
            font-family: Source Han Serif CN;
            font-weight: bold;
            font-size: 40rpx;
            -webkit-text-stroke: 1rpx rgba(7, 9, 55, 1);
            color: #FFFFFF;
            background: -webkit-linear-gradient(243deg, #01E4FF 0%, #00FCFF 32.12890625%, #FFFCCD 61.62109375%, #A56BFF 99.4140625%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
    }

    .xiangzi_left_box {
        height: 150rpx;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        box-sizing: border-box;
        padding-top: 14rpx;
        padding-left: 20rpx;

        .left_image_box {
            height: 150rpx;

            .l_t_img_box {
                width: 161rpx;
                height: 126rpx;

                image {
                    width: 100%;
                    height: 100%;
                }
            }

            .bot_text_box {
                width: 161rpx;
                height: 19rpx;
                line-height: 19rpx;
                font-family: Source Han Serif CN;
                font-weight: bold;
                font-size: 20rpx;
                text-align: center;
                color: #FFFFFF;
            }
        }

        .shengjixiang_box {
            height: 150rpx;
            line-height: 161rpx;
            font-family: Source Han Serif CN;
            font-weight: bold;
            font-size: 20rpx;
            color: #FFFFFF;
        }
    }

    .zhongjian_box {
        height: 150rpx;
        line-height: 161rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        padding-top: 14rpx;

        .l_b {
            font-family: Source Han Serif CN;
            font-weight: bold;
            font-size: 30rpx;
            color: #999999;
            margin-right: 20rpx;
        }

        .r_b {
            font-family: Source Han Serif CN;
            font-weight: bold;
            font-size: 30rpx;
            -webkit-text-stroke: 1rpx rgba(7, 9, 55, 1);
            color: #FFFFFF;
            background: -webkit-linear-gradient(173deg, #01E4FF 0%, #00FCFF 32.12890625%, #FFFCCD 61.62109375%, #A56BFF 99.4140625%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
    }
}
</style>